<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title th:text="${title}"></title>
<div th:include="/common/layui"></div>
<div th:include="/common/jq"></div>

</head>
<body style="padding-top: 3px;">

<table class="layui-hide"   id="table" lay-filter="table"></table>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="del">删除</button>
    <button class="layui-btn layui-btn-sm" lay-event="reload_data">刷新</button>
  </div>
</script>

<script type="text/html" id="table_bar">
<div class="layui-btn-group">
	<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
	<a class="layui-btn layui-btn-xs" lay-event="manage">管理子菜单</a>
</div>
</script>

</body>

<script type="text/html" id="format_state">
{{#  if(d.state == 0){ }}
根节点
{{#  } else if(d.state == 1){  }}
叶子节点
{{#  }   }}
</script>

<script type="text/html" id="format_type">
{{#  if(d.type == 0){ }}
选项卡内打开
{{#  } else if(d.type == 1){  }}
新窗口打开
{{#  }else if(d.type == 2){   }}
弹出窗口打开
{{#  }    }}
</script>

<script>
/*<![CDATA[*/
		layui.use([ 'laydate', 'laypage', 'layer', 'table', 'carousel',
				'upload', 'element' ], function() {
			var laydate = layui.laydate //日期
			, laypage = layui.laypage //分页
			,layer = layui.layer //弹层
			,form = layui.form 
			, table = layui.table //表格
			, carousel = layui.carousel //轮播
			, upload = layui.upload //上传
			, element = layui.element; //元素操作
			  table.render({
			    elem: '#table'
			    ,url: '/admin/menu/list?pId=[[${pId}]]'
			    ,totalRow: false
			    ,id: 'table'
			    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
				,page: true
				,limit:10
			    ,limits:[10,20,30,50]
				,cols: [ [
			       {checkbox: true, fixed: true}
			       ,{field:'id', title: 'ID'}
			       ,{field:'orderNo', title: '排序号',sort: true}
			      ,{field:'name', title: '菜单名称'}
			      ,{field:'url', title: '菜单地址'}
			      ,{field:'state', title: '节点类型',templet: '#format_state'}
			      ,{field:'icon', title: '图标', }
			      ,{field:'permissions', title: '权限名称'}
			      ,{field:'type', title: '打开方式',templet: '#format_type'}
			      ,{field:'divId', title: 'layuiTabId'}
			      ,{fixed:'right',title: '操作',  toolbar: '#table_bar'}
			       ]]
			  });
			//头工具栏事件
			  table.on('toolbar(table)', function(obj){
			    var checkStatus = table.checkStatus(obj.config.id);
			    switch(obj.event){
			      case 'add':
			    	  layer.open({
			    		  type: 2,
			    		  title: '添加',
			    		  shadeClose: false,
			    		  shade: 0.8,
			    		  area: ['400px','500px'],
			    		  content: '/houtai/menu/add?pId=[[${pId}]]' //iframe的url
			    		}); 
			    	  //reload_data();
			      break;
			      case 'del':			    	  
			    	  var data  = checkStatus.data;
			    	  if(data.length!=0){
			    		  var params="";
			    		  $.each(data,function(i,item){
				                 if(i==0){
				                    params+="ids="+item.id;
				                }else{
				                    params+="&ids="+item.id;
				                } 
				            });
				    	  layer.confirm('您确定要删除吗', function(index){
				                //向服务端发送删除指令
				                $.post('/admin/menu/delete',params,function(result){
				                	if(result.success){
						    			layer.closeAll();
						    			layer.msg('删除成功');
						    			  table.reload('table', {
								    			where: {}
								    	  		,page: {curr: 1}//重新从第 1 页开始
								    	    });
						    		}else{
						    			layer.closeAll();
						    			layer.alert('删除失败:'+result.msg);
						    		}
				                });
				            });
			    	  }else{
			    		  layer.closeAll();
			    		  layer.alert("请选择要删除的根菜单"); 	  
			    	  }
			      break;
			      case 'reload_data':
			    	  table.reload('table', {
			    			where: {}
			    	  		,page: {curr: 1}//重新从第 1 页开始
			    	    });
			      break;
			    };
			  });
			
			
			//监听工具条 table_bar
				table.on('tool(table)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data //获得当前行数据
					, layEvent = obj.event; //获得 lay-event 对应的值
					var id = data.id;
					if (layEvent === 'edit') {
						layer.open({
							  type: 2,
							  title: '修改',
							  shadeClose: false,
							  shade: 0.8,
							  area: ['400px', '500px'],
							  content: '/houtai/menu/edit?id='+id //iframe的url
							});
					}else if(layEvent === 'manage'){
						layer.open({
							  type: 2,
							  title: '管理子菜单',
							  shadeClose: false,
							  shade: 0.8,
							  area: ['1200px', '600px'],
							  content: '/houtai/menu/manage?pId='+id //iframe的url
							});
					}
				});
				
	
		});
		//子窗口调用 的  关闭窗口方法 
		function closeDlg(msg){
			//此方法必须写在父窗口下，子类弹窗必须在父类才能关闭
			 layer.closeAll();
			 layer.msg(msg);
		}
</script>
<script>
function seeImg(url){
	w = 2000;
	h = 2000;
	checkWindow();
	//iframe层
	if(!url){
		url = "   ";
	}
	layer.open({
	  type: 2,
	  title: '图片',
	  shadeClose: true,
	  shade: 0.8,
	  area: [w+'px', h+'px'],
	  content: url //iframe的url
	});
}


</script>
</html>